<!--
功能：日历
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-24 13:18:25
-->
<template>
  <div>
    <PageTitle title="日历组件" subTitle="仿百度日历组件，节假日，24节气，农历"></PageTitle>
    <div class="page-content">
      <div class="calendar-box">
        <div class="calendar-header">
          <div>
            <a-select ref="select" style="width: 90px; margin-right: 10px" placeholder="年份">
              <a-select-option v-for="item in yearsArr" :value="item.value">{{
                item.label
              }}</a-select-option>
            </a-select>
            <a-select ref="select" style="width: 90px; margin-right: 10px" placeholder="月份">
              <a-select-option value="jack" v-for="item in monthArr" :value="item.value">{{ item.label }}</a-select-option>
            </a-select>
          </div>
          <div>
            <a-select ref="select" style="width: 90px; margin-right: 10px" placeholder="假期">
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
              <a-select-option value="Yiminghe">yiminghe</a-select-option>
            </a-select>
            <a-button>回到今天</a-button>
          </div>
        </div>
        <div class="calendar-content">
          <div class="calendar-week">一</div>
          <div class="calendar-week">二</div>
          <div class="calendar-week">三</div>
          <div class="calendar-week">四</div>
          <div class="calendar-week">五</div>
          <div class="calendar-week">六</div>
          <div class="calendar-week">日</div>
          <div class="calendar-day" v-for="item in 42">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import useSettingsStore from '@/store/modules/settings'
//仓库实例化
const settingsStore = useSettingsStore()
// 侧边栏主题
const themeColor = computed(() => {
  return settingsStore.themeColor
})
// 背景主题
const themeBackgroundColor = computed(() => {
  return settingsStore.themeColor + '22'
})
// 开始年份
const startOfYear = 1900
// 结束年份
const endOfYear = 2050
let years = Array.from({ length: endOfYear - startOfYear + 1 }, (k, v) => {
  return {
    label: `${startOfYear + v}年`,
    value: startOfYear + v + ''
  }
})
console.log(years)
// 年份数据
const yearsArr = ref(years)
// 月份数据
const months = Array.from({ length: 12 }, (k, v) => {
  return {
    label: `${v + 1}月`,
    value:  v + 1
  }
})
// 年份数据
const monthArr = ref(months)
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
  .calendar-box {
    border: 1px solid #dcdee2;
    border-radius: 6px;
    overflow: hidden;
    width: 500px;
    height: auto;
    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      border-bottom: 1px solid #dcdee2;
    }
  }
  .calendar-content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    padding: 15px;
    .calendar-week {
      width: 100%;
      height: 30px;
      text-align: center;
      color: #17233d;
      font-size: 15px;
      font-weight: 600;
      line-height: 30px;
    }
    .calendar-day {
      color: #515a6e;
      height: 56px;
      font-size: 22px;
      text-align: center;
      line-height: 56px;
      background-color: #f8f8f8;
      border-radius: 4px;
    }
  }
}
</style>
